<!--suppress ALL -->
<template>
    <div class="godinfo" v-if="godInfo">
        <scroller
                :on-refresh="refresh"
                :on-infinite="infinite"
        >
            <header>
                <section class="headinfo">
                    <img :src="godInfo.avatar" :alt="godInfo.nick">
                    <div class="middleinfo">
                        <strong>{{godInfo.nick}}</strong>
                        <span><b v-if="godInfo.combo>0">{{godInfo.combo}}连红</b><b>{{godInfo.state}}</b></span>
                    </div>
                    <div class="rightop">
                        <em v-if="!godInfo.zj" @click="followgod">
                            <a v-if="godInfo.followed" href="javascript:;">
                                <icon name="dui" scale="1.2"/>
                                已关注</a>
                            <a v-else href="javascript:;">
                                <icon name="plus" scale="1.2"/>
                                关注</a></em>
                        <span>粉丝 {{godInfo.fans}}</span>
                    </div>
                </section>
                <p class="intro">
                    <input ref="introinput" @blur="changeintro" v-show="editintro" type="text"
                           v-model="godInfo.intro"><span
                        v-show="!editintro">{{godInfo.intro}}</span>
                    <em @click="editcheck">
                        <icon v-if="godInfo.zj" name="edit"></icon>
                    </em>
                </p>
            </header>
            <div class="container">
                <div class="title" @click="jumpanalyze">
                    <label>近期佳绩：</label>
                    <span>
                    <b v-for="(item,index) in leagueslists" v-if="index<3" :key="index">{{item.league}}</b>
                </span>
                    <icon name="right" scale="1.5"/>
                </div>
                <ul class="linstcon">
                    <li v-for="(item,index) in recommendlist" :key="index" @click="jump(item.planId)">
                        <h6>{{item.title}}</h6>
                        <Matchmiddle :matches="item.matches"/>
                        <myBottominfo
                                :deadline="item.deadline"
                                :back="item.back"
                                :winState="item.winState"
                                :bean="item.bean"
                                :timeState="item.timeState"
                                :jinstate="item.matches | getwinstate"
                        />
                    </li>
                </ul>
            </div>
        </scroller>
    </div>
</template>

<script>
    import Bottominfo from '../../components/Bottominfo.vue';
    import Matchmiddle from '../../components/Matchmiddle.vue';
    import {getMytoken, getLogintoken} from '../../service/common';
    import {
            getGodInfoByIdR,
            updateGodIntroR,
            godRecommendListR,
            godFollowR
    } from '../../service/god';
    import {getLeagueAnalyseR} from '../../service/matchs';
    import {concat} from 'ramda';
    import {delay} from '../../uitls/common'

    export default {
        components: {
            myBottominfo: Bottominfo,
            Matchmiddle
        },
        data() {
            return {
                godid: 0,
                godInfo: null,
                editintro: false,
                recommendlist: [],
                page: 1,
                leagueslists: []
            };
        },
        created() {
            const godid = this.$route.params.godid;
            this.godid = godid;
            this.getgodInfo();
            this.getLeagueAnalyse(godid);
            this.godrecommendlist(1);
        },
        filters: {
            getwinstate(matchs){
                let dd = 0;
                matchs.map((e, i)=> {
                    if(e.winState === 2) {
                        dd++
                    }
                })
                return `${matchs.length}中${dd}`
            }
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            async changeintro(){
                this.editintro = false;
                const {token}=await getMytoken(true);
                if(token) {
                    const {data}=await updateGodIntroR({token, intro: this.godInfo.intro});
                    if(data && data.code === 0) {
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }
                }
            },
            editcheck(){
                this.editintro = true;
                this.$refs.introinput.focus();
            },
            async getgodInfo(){
                const {token}=await getMytoken(true);
                const {godid}=this;
                const {data}=await getGodInfoByIdR({token, godid});
                if(data && data.code === 0) {
                    this.godInfo = data.data;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async getLeagueAnalyse(id){
                const {data}=await getLeagueAnalyseR(id);
                if(data && data.code === 0) {
                    this.leagueslists = data.data.leagues;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async refresh(done){
                await delay(1000);
                await this.godrecommendlist(1);
                this.getgodInfo();
                done();
            },
            async infinite(done){
                await delay(1000);
                const {recommendlist, page}=this;
                this.page = this.page + 1;
                const over = await this.godrecommendlist(this.page, true);
                if(over) {
                    this.page = this.page - 1;
                    done(true);
                    return;
                }
                done();
            },
            async followgod(){
                const {godInfo:{followed}, godid}=this;
                const {token}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text('未获取到用户信息');
                    return;
                }
                const {data}=await godFollowR({follow: followed, token, godid});
                if(data && data.code == 0) {
                    this.godInfo.followed = !followed;
                    if(followed) {
                        this.godInfo.fans--;
                    } else {
                        this.godInfo.fans++;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }

            },
            async godrecommendlist(page, loadermore){
                const {godid}=this;
                const {data}=await godRecommendListR({godid, page});
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.plans.length === 0) {
                            return true;
                        }
                        else {
                            this.recommendlist = concat(this.recommendlist, data.data.plans);
                        }
                    }
                    else {
                        this.page = 1;
                        this.recommendlist = data.data.plans;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            jump(planId){
                this.$router.push(`/matchs/recommendmatchdetails/${planId}`)
            },
            jumpanalyze(){
                this.$router.push(`/matchs/analyze/${this.godid}`)
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .godinfo {
        header {
            padding: 0 24px 0 30px;
            background: url(http://common-1253410441.file.myqcloud.com/activityimg/20171211193605.png) no-repeat center;
            height: 240px;
            display: flex;
            color: #fff;
            justify-content: center;
            flex-direction: column;
            .headinfo {
                align-items: center;
                display: flex;
                margin-bottom: 20px;
                img {
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    margin-right: 20px;
                }
                .middleinfo {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    justify-content: center;
                    strong {
                        color: #fff;
                        font-size: @fz32;
                        font-weight: bold;
                    }
                    span {
                        margin-top: 10px;
                        b {
                            padding: 0 20px;
                            height: 26px;
                            background: @color22;
                            border-radius: 26px;
                            margin-right: 20px;
                            text-align: center;
                        }
                    }
                }
                .rightop {
                    display: flex;
                    flex-direction: column;
                    a {
                        height: 50px;
                        background: @colororange;
                        color: #fff;
                        text-align: center;
                        line-height: 50px;
                        font: @fz26;
                        padding: 0 14px;
                        border-radius: 4px;
                        margin-bottom: 15px;
                    }
                    span {
                        font-size: @fz24;
                        text-align: center;
                    }
                }
            }
            span {
                font-size: @fz26;
            }
        }
        .intro {
            display: flex;
            align-items: center;
            span {
                flex: 1;
            }
            input {
                border: none;
                background: #fff;
                flex: 1;
            }
            svg {
                width: 60px;
                height: 60px;
            }
        }
    }

    .container {
        .title {
            padding: 0 24px 0 34px;
            height: 80px;
            background: #fff;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            label {
                font-size: @fz26;
                color: @color3;
            }
            span {
                flex: 1;
            }
            b {
                box-sizing: border-box;
                border-radius: 34px;
                height: 34px;
                text-align: center;
                line-height: 34px;
                font-size: @fz26;
                border: 1px solid @color22;
                color: @color22;
                padding: 0 12px;
                margin-right: 20px;
            }
            svg {
                color: @color4;
            }
        }
        .linstcon {
            li {
                padding: 20px 24px 20px 34px;
                background: #fff;
                margin-bottom: 10px;
                h6 {
                    font-size: @fz28;
                }
            }
        }
    }
</style>